<template>
  <div>
    <el-container>
      <!--侧边栏-->
      <client-aside-view :aside-width="asideWidth" :is-collapse="isCollapse"
                         @changeComponent="changeComponent"></client-aside-view>
      <el-container>
        <!--头部区域-->
        <client-header-view :collapse-icon="collapseIcon" :user="user" :logout="logout"
                            :handle-collapse="handleCollapse"></client-header-view>
        <el-main>
          <component :is="currentComponent"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import ClientAsideView from "@/components/ClientAsideView";
import ClientHeaderView from "@/components/ClientHeaderView";
import ProductView from "@/views/client/product/ProductView";
import OrderView from "@/views/client/order/OrderView";
import RelationView from "@/views/client/seckill/RelationView";

export default {
  name: "ClientView",
  components: {ClientAsideView, ClientHeaderView, ProductView, OrderView, RelationView},
  data() {
    return {
      //当前显示的组件
      currentComponent: 'ProductView',
      //默认菜单不收缩
      isCollapse: false,
      //侧边栏宽度
      asideWidth: "200px",
      //默认显示图标为收缩图标
      collapseIcon: "el-icon-s-fold",
      //管理员数据
      user: {
        name: ''
      },
    }
  },
  methods: {
    //切换当前页面显示的核心组件
    changeComponent(index) {
      if (index === "/userProduct") {
        this.currentComponent = 'ProductView';
      } else if (index === "/userOrder") {
        this.currentComponent = 'OrderView';
      } else if (index === "/userSeckill") {
        this.currentComponent = 'RelationView';
      }
    },

    //退出登录
    logout() {
      localStorage.removeItem("user");
      this.$router.push(`/login`);
    },

    //控制菜单的左右收缩
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? "64px" : "200px";
      this.collapseIcon = this.isCollapse
          ? "el-icon-s-unfold"
          : "el-icon-s-fold";
    },

    //获取登录的用户数据
    getUser() {
      //从本地存储中获取用户数据
      let user = localStorage.getItem("user")
      //设置name
      if (user) {
        user = JSON.parse(user)
        this.user.name = user.data.name
      }
    }
  },

  mounted() {
    this.getUser()
  }
}
</script>

<style>
@import "@/css/global.css";
</style>